<nav class="sb-topnav navbar navbar-expand navbar-light bg-light">
  <span class="material-icons ng-tns-c170-0 mr-2" style="color: #fff;font-size: 30px;"> cloud_download</span>
  <a class="navbar-brand d-none d-md-block" routerLink="/" style="color: #fff;">
    Dorisoy.Pan
  </a>
  <button (click)="toggleSideBar()" class="btn btn-link" id="sidebarToggle">
    <span class="material-icons-outlined text-regular">
      menu
    </span>
  </button>
  <form class="d-none d-md-inline-block form-inline">
    <div class="icon-group" *ngIf="isSearchBoxVisible">
      <span class="material-icons-outlined search-icon">
        search
      </span>
      <input class="form-control" (focus)="onSearchClick()" type="text" placeholder="搜索..." aria-label="Search for..."
        aria-describedby="btnNavbarSearch" />
    </div>
  </form>
  <div class="input-group" [ngClass]="isSearchBoxVisible ? 'dispaly-none' : ''" style="width: 100%;">
    <input [formControl]="searchCtl" #search class="form-control" type="text" placeholder="搜索..."
      aria-label="Search for..." aria-describedby="btnNavbarSearch" />
    <button type="button" (click)="onSearchCancel()" class="btn bg-transparent"
      style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
  </div>
  <ul class="navbar-nav ml-auto">
    <!-- <li class="nav-item active-link-header  d-none d-md-block">
      <a class="nav-link cursor-pointer">
        Help
      </a>
    </li>
    <li class="nav-item  d-none d-md-block">
      <a class="nav-link cursor-pointer">
        Messages
      </a>
    </li> -->
    <li class="nav-item dropdown no-arrow">
      <a class="nav-link cursor-pointer dropdown-toggle" id="notification" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        <div class="notifications">
          <div class="notification-count">
            {{totalNotifications}}
          </div>
          <span class="material-icons-outlined">
            notifications
          </span>
        </div>
      </a>
      <ul class="dropdown-menu notifications-list" role="menu" aria-labelledby="notification">
        <li class="divider"></li>
        <ng-container *ngIf="notifications.length>0">
          <div role="button" class="content" class="blockquote mb-0" (click)="onNotificationClick(notification)"
            *ngFor="let notification of notifications">
            <div class="notification-item">
              <blockquote>
                <a role="button" class="d-flex align-items-center">
                  <div class="form-row align-items-center">
                    <div class="col-md-auto col-auto">
                      <i *ngIf="notification.folderId"
                        class="fas fa-folder folder-list text-main mr-2 notification-icon"></i>
                      <img *ngIf="!notification.folderId" [src]="notification.documentThumbnail" alt=""
                        class="mr-2 notification-img">
                    </div>
                    <div class="col-md col">
                      <div class="row">
                        <div class="col-md col fs-17 text-dark">
                          <ng-container *ngIf="notification.folderId">{{notification.folderName}}</ng-container>
                          <ng-container *ngIf="!notification.folderId">{{notification.documentName}}</ng-container>
                          shared with you.
                          <div class="blockquote-footer fs-13">
                            {{notification.createdDate | dateAgo}} By {{notification.fromUserName}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              </blockquote>
            </div>
          </div>
        </ng-container>
        <div *ngIf="notifications.length==0" role="button" class="content" class="blockquote mb-0">
          <div class="notification-item">
            <blockquote>
              <h5 class="no-notification">
                没有任何通知
              </h5>
            </blockquote>
          </div>
        </div>
        <div *ngIf="notifications.length!=0" class="notify-drop-footer text-center">
          <a [routerLink]="['/notifications']">预览全部</a>
        </div>
      </ul>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle cursor-pointer font-initial" id="dropdownMenuButton" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <img class="user-image" [src]="appUserAuth.profilePhoto">
        {{appUserAuth.firstName}} {{appUserAuth.lastName}}
      </a>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li>
          <a class="dropdown-item" [routerLink]="['/my-profile']">
            <div class="row align-items-center mt-1 mb-1">
              <i class="material-icons-outlined mr-2 ml-1 text-primary">account_circle</i>
              个人信息
            </div>
          </a>
        </li>
        <li>
          <a class="dropdown-item" [routerLink]="['/']">
            <div class="row align-items-center mt-1 mb-1">
              <span class="material-icons-outlined  mr-2 ml-1 text-primary">
                folder
              </span> 我的文件
            </div>
          </a>
        </li>
        <li>
          <a class="dropdown-item" *ngIf="appUserAuth.isAdmin" [routerLink]="['/admin']">
            <div class="row align-items-center mt-1 mb-1">
              <span class="material-icons-outlined mr-2 ml-1 text-primary">
                admin_panel_settings
              </span> 管理
            </div>
          </a>
        </li>
        <li (click)="onLogout()" role="button">
          <a class="dropdown-item">
            <div class="row align-items-center mt-1 mb-1">
              <span class="material-icons-outlined mr-2 ml-1 text-primary">
                logout
              </span> 注销
            </div>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
